<template>
  <div class="dowebok-body" @keyup.13="login">
    <p class="text-center pt-5 text-white" style="font-size: 2rem;">陕西省第三次全国国土调查全流程监管系统</p>
    <div class="dowebok">
      <div class="logo"></div>
      <div class="form-item">
        <input id="username" type="text" autocomplete="off" placeholder="账号" v-model="user.mix" />
      </div>
      <div class="form-item">
        <input id="password" type="password" autocomplete="off" placeholder="登录密码" v-model="user.password" />
      </div>
      <!-- <div class="form-item pb-2">
        <input id="code" type="text" autocomplete="off" placeholder="验证码" v-model="user.num" />
        <img @click="getCodeImg" :src="codeImg" alt="验证码" style="position: absolute;top: 4px;right: 20px;">
      </div> -->
      <div class="pb-4 pl-5">
        <el-checkbox v-model="checked" class="text-white">记住密码</el-checkbox>
      </div>
      <div class="form-item"><button id="submit" @click="login" :loading="loading">登 录</button></div>
      <!-- <div class="reg-bar">
        <a class="forget" href="#/register"
          >立即注册</a>
      </div> -->
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import Cookies from 'js-cookie'

export default {
  name: "login",
  title: "登录",
  data() {
    console.log('process.env.NODE_ENV-->', process.env.NODE_ENV);
    return {
      user: {
        mix: '',
        password: '',
        num: ''
      },
      code: '',
      codeImg: '',
      checked: Cookies.get('remember') === '1' ? true : false,
      loading: false
    };
  },
  mounted() {
    // this.getCodeImg()
    if (this.checked) {
      this.user.mix = localStorage.getItem('mix')
      this.user.password = localStorage.getItem('password')
    }
  },
  methods: {
    getCodeImg() {
      axios.get('survey/user/verifyCode?width=120&height=40').then(res => {
        if (res.status === 200) {
          this.code = res.headers['verify-code']
          this.codeImg = `data:image/png;base64,${res.data}`
        } else {
          this.$codeError(res)
        }
      }).catch(error => {
        console.log('error', error);
        this.$catchError(error)
      })
    },
    login() {
      this.loading = true
      this.$post('survey/user/loginWithOutVerifyCode', this.user, { convert: false, config: {
          headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Headers': '*',
            'VERIFY-CODE': this.code
          }
        }}).then(res => {
        // this.$store.commit("setRouter", res.data.data.userType)
        if (this.checked) {
          localStorage.setItem('mix', this.user.mix)
          localStorage.setItem('password', this.user.password)
          Cookies.set('remember', '1')
        } else {
          localStorage.removeItem('mix')
          localStorage.removeItem('password')
          Cookies.set('remember', '0')
        }
        this.$store.commit("login", res.data.data)
        if (res.data.data.userType === 4) {
          this.$router.replace({ name: 'userstatistics' })
        } else {
          // this.$router.replace({ name: 'workdesk' })
          this.$router.replace({ name: 'check-static' })
        }
        
        localStorage.setItem("globalProvinceId", res.data.data.provinceId);
        localStorage.setItem("accountName", res.data.data.account);
        localStorage.setItem("imPassword", res.data.data.imPassword);
      }).catch((type, err) => {
        if (type === 'code') {
          // this.getCodeImg()
          this.user.num = ''
        }
      }).finally(() => {
        this.loading = false
      })
      // 登录逻辑
      // axios({
      //   method: 'post',
      //   url: 'survey/user/login',
      //   data: this.user,
      //   headers: {
      //     'Content-Type': 'application/json',
      //     'Access-Control-Allow-Headers': '*',
      //     'VERIFY-CODE': this.code
      //   }
      // }).then(res => {
      //   if (res.data.code === '200') {
      //     this.$store.commit("login", res.data.data)
      //     this.$router.replace({name: 'first-content'})
      //   } else {
      //     this.getCodeImg()
      //     this.user.num = ''
      //     this.$codeError(res)
      //   }
      // }).catch(error => {
      //   console.log('error', error);
      //   this.$catchError(error)
      // }).finally(() => {
      //   this.loading = false
      // })
    }
  }
};
</script>
<style lang="css">
.dowebok-body {
  height: 100vh;
  background: #fff url(../../assets/backgroud.jpg) 50% 50% no-repeat;
  background-size: cover;
}
.dowebok {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 430px;
  height: 600px;
  margin: -300px 0 0 -215px;
  border: 1px solid #fff;
  border-radius: 20px;
  overflow: hidden;
}
.logo {
  width: 104px;
  height: 104px;
  margin: 50px auto 80px;
  background: url(../../assets/login.png) 0 0 no-repeat;
}
.form-item {
  position: relative;
  width: 360px;
  margin: 0 auto;
  padding-bottom: 30px;
}
.form-item input {
  width: 100%;
  height: 48px;
  padding-left: 70px;
  border: 1px solid #fff;
  border-radius: 25px;
  font-size: 18px;
  color: #fff;
  background-color: transparent;
  outline: none;
}
.form-item button {
  width: 360px;
  height: 50px;
  border: 0;
  border-radius: 25px;
  font-size: 18px;
  color: #1f6f4a;
  outline: none;
  cursor: pointer;
  background-color: #fff;
}
#username {
  background: url(../../assets/account.png) 18px 6px no-repeat;
}
#password {
  background: url(../../assets/password.png) 23px 11px no-repeat;
}
#code {
  background: url(../../assets/code.png) 20px 8px no-repeat;
}
.tip {
  display: none;
  position: absolute;
  left: 20px;
  top: 52px;
  font-size: 14px;
  color: #f50;
}
.reg-bar {
  width: 360px;
  margin: 20px auto 0;
  font-size: 14px;
  overflow: hidden;
}
.reg-bar a {
  color: #fff;
  text-decoration: none;
}
.reg-bar a:hover {
  text-decoration: underline;
}
.reg-bar .reg {
  float: left;
}
.reg-bar .forget {
  float: right;
}
.dowebok ::-webkit-input-placeholder {
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
}
.dowebok :-moz-placeholder {
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
}
.dowebok ::-moz-placeholder {
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
}
.dowebok :-ms-input-placeholder {
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
}

@media screen and (max-width: 500px) {
  * {
    box-sizing: border-box;
  }
  .dowebok {
    position: static;
    width: auto;
    height: auto;
    margin: 0 30px;
    border: 0;
    border-radius: 0;
  }
  .logo {
    margin: 50px auto;
  }
  .form-item {
    width: auto;
  }
  .form-item input,
  .form-item button,
  .reg-bar {
    width: 100%;
  }
}
</style>
